<template>
  <div class="main">
    <div class="top">
      <div class="s1">
        <div class="title">{{ userInfo.userCompanyName }}</div>
        <div @click="router.push('/search')" class="finput">
          <img src="../assets/images/icon/fdj.png" alt="" srcset="" />
          <div>请输入关键字</div>
        </div>
        <div @click="show = !show" class="card">
          <div class="welcome">Welcome，</div>
          <div class="nameo">
            <span class="name">尊敬的患者 {{ userInfo.nickName }}</span>
            <div class="wtip">欢迎访问！</div>
          </div>
          <div class="depto">
            <div class="dept">性别:{{ userInfo.sex == 1 ? '男' : '女 ' }} <span style="margin-left:10px">年龄:{{ userInfo.age
                }}</span></div>
            <div>
              {{
          userInfo.userRoles && userInfo.userRoles.length > 0
            ? userInfo.userRoles.toString()
            : ""
        }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center" :style="{
            height: height,
          }">
      <div class="bcard">
        <div class="swo">
          <div class="sw">
            <van-swipe :loop="true" :autoplay="5000" style="height: 100%">
              <van-swipe-item class="swi" style="" v-for="e in [t1, t2, t3,]"><img :src="e" style=""
                  alt="" /></van-swipe-item>
            </van-swipe>
          </div>
          <div class="rcard">
            <div class="rcard1">
              <div class="rcardo">
                <div @click="router.push('/upload')" class="rcardi">
                  <span>ct影像上传识别</span>
                  <div class="arrow">
                    <img style="width: 80%; height: 80%" src="../assets/images/icon/arr-r.png" alt="" />
                  </div>
                </div>
              </div>
            </div>

            <div class="rcard2">
              <div class="rcardo">
                <div @click="router.push('/his')" class="rcardi" style="">
                  <span>ct影像上传记录</span>
                  <div class="arrow" style="">
                    <img style="width: 80%; height: 80%" src="../assets/images/icon/arr-r.png" alt="" />
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div v-if="list.length != 0" style="padding:10px" class="items">
        <div v-for="e in list"
          style="width:100%;height:120px;border:1px solid #333;display:flex; margin-top: 10px;box-sizing:border-box;">
          <img style="width:118px;height:118px;margin-right: 10px;" :src="baseUrl + e.cturl" alt="">
          <div
            style="font-size:18px;display:flex;flex-direction: column;justify-content: space-around;font-size: 15px;">
            <div>上传时间:{{ dayjs(+e.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>

            <div v-if="JSON.parse(e.result).data.res == 0">识别结果: <span style="color:#07c160;font-weight: 600;">{{
          e.result ?
            JSON.parse(e.result).res1 : '' }}</span> </div>
            <div v-if="JSON.parse(e.result).data.res == 1">识别结果: <span style="color:#ff976a;font-weight: 600;">{{
          e.result ? JSON.parse(e.result).res1 : '' }}</span> </div>
            <div v-if="JSON.parse(e.result).data.res == 2">识别结果:<span style="color:#f85149;font-weight: 600;">{{
          e.result ? JSON.parse(e.result).res1 : '' }}</span> </div>
          </div>
        </div>
        <div @click="router.push('/his')"
          style="width:100%;display:flex;justify-content: flex-end;font-weight: 600;font-size: 16px;">查看更多</div>
      </div>
      <div style="width: 100% ;height:200px; font-size: 20px;display:flex;justify-content: center; align-items: center;"
        v-else>
        暂无上传记录
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import t1 from "@/assets/images/a1.jpg"
import t2 from "@/assets/images/a2.jpg"
import t3 from "@/assets/images/a3.jpg"
import { getHistoryList } from "@/api";
import dayjs from "dayjs";
const router = useRouter();
const show = ref(false);
const height = ref("0px");
const userInfo = ref<any>({});
const list = ref<any>([])
const baseUrl = ref(import.meta.env.VITE_IMAGE_URL)
const init = async () => {
  let h = window.innerHeight;
  height.value = h - 220 + "px";
  userInfo.value = window.localStorage.getItem("userInfo")
    ? JSON.parse(window.localStorage.getItem("userInfo") as string)
    : {};
  await getHistoryList({
    pageNumber: 1,
    pageSize: 2,
  }).then((res: any) => {
    if (res.code == 200) {
      list.value = res.data.list
    }
  });





};
init();

</script>

<style scoped lang="scss">
.main {
  width: 100%;
  background-color: #eee;
  overflow: hidden;

  .tip {
    .number {
      margin: 0 4px;
      color: #1976c6;
      font-weight: 600;
    }

    padding-left: 10px;
    display: flex;
    border-radius: 4px;
    align-items: center;
    width: calc(100% - 20px);
    position: relative;
    z-index: 99;
    height: 30px;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    box-sizing: border-box;
    margin: 10px auto 0;

    &::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: red;
      margin-right: 10px;
    }
  }

  .center {
    width: 100%;
    overflow-y: scroll;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 15vw;

    .bcard {
      width: 100%;
      height: 240px;

      .swo {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .rcard {
          flex: 1;
          margin-top: 2px;
          display: flex;

          .rcard1 {
            flex: 1;
            padding: 2px 2px 4px;

            .rcardo {
              .rcardi {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: white;
                font-size: 18px;
                font-weight: 600;

                .arrow {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  background-color: rgb(66, 136, 229);
                  padding: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }

              height: 100%;
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(to right,
                rgb(2, 116, 231),
                rgb(2, 99, 229));
            }
          }

          .rcard2 {
            flex: 1;
            padding: 2px 2px 4px;

            .rcardo {
              .rcardi {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: white;
                font-size: 18px;
                font-weight: 600;

                .arrow {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  background-color: rgb(233, 150, 63);
                  padding: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }

              height: 100%;
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(to right,
                rgb(230, 133, 2),
                rgb(228, 121, 2));
            }
          }
        }

        .sw {
          height: 170px;
          padding: 4px;
          border-radius: 8px;
          box-sizing: border-box;
          overflow: hidden;

          .swi {
            border-radius: 8px;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          }
        }
      }
    }

    .items {
      width: 100%;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      color: #1976c6;
      justify-content: center;
      box-shadow: 2px 2px 5px #000;
      box-sizing: border-box;
      box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);

      .item {
        width: 19%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .gray {
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%);
          filter: gray;
          color: gray !important;
        }

        .imgbox {
          width: 50px;
          height: 50px;
          background-color: rgb(141, 217, 247, 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 6px;

          img {
            width: 35px;
            height: 35px;
          }
        }

        .title {
          width: 60px;
          margin-top: 6px;
          display: flex;
          align-items: center;
          font-size: 12px;
          justify-content: center;
        }
      }

      .vitem {
        width: 19%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .imgbox {
          width: 50px;
          height: 50px;
          background-color: rgb(141, 217, 247, 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 6px;

          img {
            width: 35px;
            height: 35px;
          }
        }

        .title {
          width: 60px;
          margin-top: 6px;
          display: flex;
          align-items: center;
          font-size: 12px;
          justify-content: center;
        }
      }
    }
  }

  .top {
    width: 100%;
    background-color: #1976c6;
    padding: 6px 10px;
    box-sizing: border-box;

    .s1 {
      width: 100%;
      height: 140px;
      padding-top: 20px;
      box-sizing: border-box;
    }

    .card {
      width: 100%;
      height: 120px;
      color: white;
      border-radius: 6px;
      overflow: hidden;
      background: url("../assets/images/icon/11.jpg") no-repeat;
      background-size: 100% auto;
      font-size: 14px;
      margin-top: 10px;
      padding: 24px 12px;
      box-sizing: border-box;
      z-index: 99;
      position: relative;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: inherit;
        filter: blur(1px);
        z-index: -1;
      }

      .nameo {
        margin: 10px 0;
        display: flex;
        align-items: center;

        .name {
          font-weight: bolder;
          font-size: 16px;
        }

        .wtip {
          margin-left: 14px;
        }
      }

      .depto {
        display: flex;
        align-items: center;
      }

      .dept {
        margin-right: 20px;
      }

      .welcome {
        font-weight: 700;
        font-size: 17px;
      }
    }

    .finput {
      width: 100%;
      height: 30px;
      margin-top: 10px;
      display: flex;
      border-radius: 4px;
      background-color: rgba(111, 167, 240, 0.3);
      align-items: center;
      color: rgba(255, 255, 255, 0.6);
      font-size: 13px;

      img {
        width: 17px;
        height: 17px;
        margin: 0 10px;
      }
    }

    .title {
      font-weight: 600;
      color: white;
      font-size: 16px;
    }
  }
}
</style>
